import Utils from "./utils.js";

class Point {
    _initWebgl() {
        const VSHADER_SOURCE = `
            attribute vec4 a_Position;
            attribute float a_PointSize;
            void main(){
            gl_Position = a_Position;
            gl_PointSize =a_PointSize;
            }`;

        const FSHADER_SOURCE = `
            precision mediump float;
            uniform vec4 u_FragColor;
            uniform bool pointFlag;
            void main(){
                if(pointFlag){
                    float dist =distance(gl_PointCoord,vec2(0.5,0.5));
                    if(dist<0.5){
                        gl_FragColor = u_FragColor;
                    }else{
                        discard;
                    }
                }else{
                    gl_FragColor = u_FragColor;
                }
            }`;

        if (!initShaders(this.gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.error('Failed to initialize shaders');
            return;
        }
    }

    constructor(webgl) {
        this.webgl = webgl;
        this.gl = getWebGLContext(webgl);
        let gl = this.gl
        this._initWebgl();
        this.a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        this.u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
        this.pointFlag = gl.getUniformLocation(gl.program, 'pointFlag');
        this.a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
        this.clearColor();
        gl.vertexAttribPointer(this.a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(this.a_Position);
    }

    clearColor(color = [0.0, 0.0, 0.0, 1.0]) {
        this.gl.clearColor(...color);
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    }

    render(pointNumber, pointSize, pointShape) {
        let num = 0;
        let gl = this.gl;
        let utils = new Utils();
        let index = [];
        let data = utils.initWebGLPointData(pointNumber)
        for (let i = 0, length = data.length / 2; i < length; i++) {
            index.push(num++)
        }
        console.log(index)
        gl.vertexAttrib1f(this.a_PointSize, pointSize);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.DYNAMIC_DRAW);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.DYNAMIC_DRAW);
        gl.uniform4f(this.u_FragColor, ...[0.68, 0.45, 0.55, 1.0]);
        if (pointShape == 'round') {
            gl.uniform1f(this.pointFlag, true);
        } else {
            gl.uniform1f(this.pointFlag, false);
            console.log(123)
        }
        gl.drawElements(gl.POINTS, data.length / 2, gl.UNSIGNED_SHORT, 0);
    }
}

class PointByCanvas {
    constructor(canvas) {
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
    }
    render(pointNumber, pointSize, pointShape) {
        this.canvas.height = this.canvas.height;
        this.canvas.width = this.canvas.width;
        let context = this.context;
        let utils = new Utils();
        context.fillStyle = "#ff0000";
        let data = utils.initCanvasPointData(pointNumber);
        if (pointShape == 'square') {
            for (let i = 0, length = data.length; i < length - 2; i += 2) {
                context.fillRect(data[i], data[i + 1], pointSize, pointSize);
            }
        } else {
            context.fillStyle = '#ff0000';
            for (let i = 0, length = data.length; i < length - 2; i += 2) {
                context.beginPath();
                context.arc(data[i], data[i + 1], pointSize / 2, 0, 2 * Math.PI, false);
                context.fill();
            }
        }
    }
}

export {
    PointByCanvas,
    Point
}